<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common/swiper/swiper.min.css"/>
    <style>
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        html,body{
            background-color: transparent;
        }
        .swiper-slide-banner{
            width: 2.05rem;
            height: 1.30rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        .swiper-slide-banner-block{
            width: 2.05rem;
            height: 1.10rem;
            background-size: 2.05rem 1.10rem;
            border-radius:0.08rem;
        }
        .swiper-slide-banner-text{
            font-size: 0.12rem;
            line-height: 0.17rem;
            color: #A0522C;
            margin-top: 0.04rem;
        }
    </style>
</head>
<body>
    <div class="swiper-container" id="banner-swiper-container" style="width: 100%; height: 1.90rem;">
        <div class="swiper-wrapper flex" id="banner-swiper-wrapper" style="align-items: center;"></div>
    </div>
    <div id="product-block" class="flex" style="width: 100%; flex-wrap: wrap; justify-content: center;">
        <div id="product-list" style="width: 3.50rem; background-color: #FFFFFF;"></div>
    </div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common/common.js"></script>
<script type="text/javascript" src="../../script/common/swiper/swiper.min.js"></script>
<script type="text/javascript">
    var productBlock, bannerSwiperWrapper;
    var bannerSwiper;
    var bannerData, select, productList = [];
    apiready = function () {
        productBlock = $api.byId('product-block');
        bannerSwiperWrapper = $api.byId('banner-swiper-wrapper');
        getBanner();
    }

    function getBanner() {
        bannerData = [
            {
                "product_name": "银牌会员",
                "product_desc": "无限制观看大相培训课程",
                "background": "../../image/my/background-yin.png",
                "tag": "续费银牌会员（最低0.5元/天）"
            },{
                "product_name": "金牌会员",
                "product_desc": "风水医道大师一对一服务",
                "background": "../../image/my/background-jin.png",
                "tag": "升级金牌会员（最低1元/天）"
            }
        ];
        for (var i=0,len=bannerData.length; i<len; i++)
        {
            $api.append(bannerSwiperWrapper,
                '<div id=' + "bannerblock-" + i + ' class="swiper-slide swiper-slide-banner flex">' +
                    '<div class="swiper-slide-banner-block" style="background-image: url(' + bannerData[i]["background"] + ');">' +
                        '<div class="flex" style="width: 100%; height: 0.60rem; justify-content: center;">' +
                            '<div class="flex" style="width: 1.70rem; height: 0.60rem; border-style: dashed; border-bottom-width: 0.01rem; border-color: #979797; align-items: center;">' +
                                '<p style="font-size: 0.20rem; color: #26344C; font-weight: 600;">'+ bannerData[i]["product_name"] + '</p>' +
                            '</div>' +
                        '</div>' +
                        '<div class="flex" style="width: 100%; height: 0.50rem; justify-content: center;">' +
                            '<div class="flex" style="width: 1.70rem; height: 0.50rem; align-items: center;">' +
                                '<p style="font-size: 0.14rem; color: #231313;">'+ bannerData[i]["product_desc"] + '</p>' +
                            '</div>' +
                        '</div>' +
                    '</div>' +
                    '<p class="swiper-slide-banner-text">' + bannerData[i]["tag"] + '</p>' +
                '</div>'
            );
        }
        var tag = api.pageParam.tag;
        select = tag;

        bannerSwiper = new Swiper ('#banner-swiper-container', {
            // autoplay:{
            //     disableOnInteraction: false,
            // },
            // loop: true,
            on: {
                slideChangeTransitionEnd: function(){
                    getProductList(this.activeIndex);
                },
            },
            initialSlide : api.pageParam.tag,
            centeredSlides: true,
            slidesPerView: "auto",
            effect: "coverflow",
            coverflowEffect: {
                rotate: 0,
                stretch: -40,
                depth: 250,
                // modifier: 2,
                slideShadows : false
            },
        });
        getProductList(tag);
    }

    function getProductList(tag) {
        productList = [];
        var productListEl = $api.byId('product-list');
        $api.remove(productListEl);
        $api.append(productBlock, '<div id="product-list" style="width: 3.50rem; background-color: #FFFFFF;"></div>');
        productListEl = $api.byId('product-list');

        api.ajax({
            url: apiUrl + '/buy/product-list',
            tag: '/buy/product-list',
            method: 'get',
            data: {
                values: {
                    token: $api.getStorage("token"),
                    tag: tag
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    productList = ret.data.product_list;

                    for (var i=0,leni=productList.length; i<leni; i++) {

                        $api.append(productListEl, '<div class="flex" style="width: 100%; height: 0.65rem; justify-content: space-between; align-items: center; border-style: solid; border-bottom-width: 0.005rem; border-color: #D0D0D0;">' +
                                '<p style="font-size: 0.14rem; color: #26344C; margin-left: 0.16rem;">' + productList[i]["period"] + "天" + '</p>' +
                                '<div class="flex" style="align-items: center; margin-right: 0.16rem;">' +
                                    '<p style="font-size: 0.18rem; font-weight: 600; color: #FF3B30; margin-right: 0.12rem;">' + "¥" + productList[i]["real_price"]/100 + '</p>' +
                                    '<div style="width: 0.56rem; height: 0.26rem; background-color: #A0522C; border-radius: 0.225rem; line-height: 0.26rem; text-align: center; font-size: 0.12rem; color: #FFFFFF;" tapmode onclick="openMemberOrderWin(' + i + ')">开通</div>' +
                                '</div>' +
                            '</div>');
                    }
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function openMemberOrderWin(index) {
        api.openWin({
            name: 'memberOrderWin',
            url: './memberOrderWin.html',
            slidBackType: 'edge',
            pageParam: {
                product_id: productList[index]["product_id"],
                real_price: productList[index]["real_price"],
            },
            animation: {
                type:"movein",
                subType:"from_right",
                duration:300
            }
        });
    }
</script>
